<template>
	<view class="page">
		<view class="person-form">
			<view class="form-item">
				<view class="form-title">
					头像
				</view>
				<view class="img-head" @click="updateImg">
					<image :src="user_pic" mode="" v-if="user_pic"></image>
					<image src="../../static/logo.png" mode="" v-else></image>
					<span class="iconfont icon-jiantou"></span>
				</view>
			</view>
			<view class="form-item">
				<view class="form-title">
					名字
				</view>
				<view class="username">
					<input type="text"  v-model="nick_name" placeholder="请输入用户昵称(必填)"/>
				</view>
			</view>
			<view class="form-item">
				<view class="form-title">
					手机号
				</view>
				<view class="phonenumber">
					<input type="text" maxlength="11" v-model="phoneNum" placeholder="请输入手机号" />
				</view>
			</view>
		</view>
		<view class="self-form">
			<view class="form-item">
				<view class="form-title">
					<span class="iconfont icon-dizhiguanli"></span>我的地址
				</view>
				<view class="form-select">
					<span class="iconfont icon-jiantou"></span>
				</view>
			</view>
			<view class="form-item"@click="goUpdatePassword">
				<view class="form-title" >
					<span class="iconfont icon-mima1"></span>修改密码
				</view>
				<view class="form-select">
					<span class="iconfont icon-jiantou"></span>
				</view>
			</view>
		</view>
		<view class="save--btn" @click="changeInfo">
			保存修改
		</view>
	</view>
</template>

<script>
	import { updateUser } from '../../api/index.js'
	export default {
		data() {
			return {
				user_pic:'',
				nick_name:'',
				phoneNum:'',
				userId:''
			}
		},
		created(){
			const user = uni.getStorageSync('userInfo')
			this.nick_name = user.nick_name,
			this.phoneNum = user.phoneNum,
			this.user_pic = user.user_pic,
			this.userId = user.id
		},
		methods: {
			//保存修改
			changeInfo(){
				updateUser({id:this.userId,nick_name:this.nick_name,user_pic:this.user_pic,phoneNum:this.phoneNum})
				.then(res=>{
					console.log(res,111)
					if(res.data.status === 0){
						//保存修改提示成功
						uni.showToast({
							title:"修改成功"
						})
						let info = uni.getStorageSync("userInfo")
						//保存最新数据到本地
						let userInfo = {...info,nick_name:this.nick_name,user_pic:this.user_pic,phoneNum:this.phoneNum}
						uni.setStorageSync("userInfo",userInfo)
					}
				})
			},
			goUpdatePassword(){
				console.log('111')
				uni.navigateTo({
					url:'/pages/updatedPassword/updatedPassword'
				})
			},
			updateImg(){
				console.log('用户点击头像')
				//选择图片
				uni.chooseMessageFile({
					count:1,
					type:'image',
					success:(res=>{
						console.log(res,"212132")
						let imageUrl = res.tempFiles[0].path
						// console.log(imageUrl)
						uni.uploadFile({
							url:'http://8.140.198.52:8001/common/uploadFile',
							filePath:imageUrl,
							name:'file',
							header:{
								"Authorization":uni.getStorageSync('token'),
								"content-type":'multipart/form-data',
							},
							success:(res =>{
								console.log(res,"图片在服务器上的地址")
								this.user_pic = res.data
							})
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss"  scoped>
.page{
	width: 100%;
	height: 100vh;
	background-color: #f2f2f2;
	.person-form{
		height: 450rpx;
		background-color: pink;
		// padding: 10rpx;
		margin-bottom: 40rpx;
		.form-item{
			height: 100rpx;
			line-height: 100rpx;
			background-color: white;
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 2rpx solid gray;
			.img-head{
				height: 100rpx;
				// background-color: blue;
				// align-items: center;
				text-align: center;
				display: flex;
				margin-left: auto;
			}
			.img-head image{
				width: 90rpx;
				height: 90rpx;
				align-self: center;
				border-radius: 50%;
			}
			.username{
				margin-left: auto;
				color: gray;
			}
			.phonenumber{
				margin-left: auto;
				color: gray;
			}
		}
	}
	.self-form{
		height: 200rpx;
		// background-color: white;
		// padding: 20rpx;
		padding-top: 20rpx;
		.form-item{
			height: 100rpx;
			line-height: 100rpx;
			background-color: white;
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
			padding: 0rpx 10rpx 0rpx 10rpx;
			
		}
		.form-select{
			margin-left: auto;
		}
	}
	.save--btn{
		width: 85%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1067D1;
		text-align: center;
		margin: 80rpx auto 0;
		border-radius: 50rpx;
		color: white;
	}
}
</style>
